<template>
<div class="container" :class="cc()">
    <div class="formwaper">
        <p class="title">{{$t('btns.a')[0]}}</p>
        <p class="subtitle">{{$t('index.subTitle')}}</p>
        <a-form-model id="components-login"  :form="form" ref="ruleForm"   :model="form"  :rules="rules" >
            <a-form-model-item required prop="email">
                <a-input v-model="form.email"  :placeholder="$t('index.from')[1]">
                    <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                </a-input>
            </a-form-model-item>
            <a-form-model-item required prop="verifycode">
                <a-input  v-model="form.verifycode" :placeholder="$t('index.from')[4]" >
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    <a-button slot="addonAfter" type="primary" class="verifyButton" :loading='verifycodeLoding'  @click="handleGetMailCode">
                         获取验证码
                    </a-button>
                </a-input>
            </a-form-model-item>
            <div class="continfo">
              <p class="tel">{{$t('index.infotel')}}</p>

              <p class="time">{{$t('index.infotel1')}}</p>
            </div>
            <a-form-model-item>
                <a-button type="primary"  @click="handleSubmit"  class="login-form-button">
                    {{$t('btns.a')[0]}}
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</div>
</template>

<script>
import dataJson from "~/static/data";
import {getMailCodeApi} from "~/assets/js/api";
import countTo from "vue-count-to";
import {
    mapGetters
} from "vuex";
export default {
    name: 'index',
    components: {
        countTo
    },
    head() {
        return {
            title: "Onlogy供应商"
        };
    },
    data() {
        return {
          form:{
            email:'',
            verifycode:''
          },
          verifycodeLoding:false,
          rules: {
            verifycode: [{ required: true, message: '请输入验证码'}],
            email: [
                { required: true, message: '邮箱不能为空', trigger: 'blur' },
                { required: true,pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,message: '邮箱格式不正确',trigger: 'blur'},
                { min: 3, max: 50, message: 'Length should be 3 to 50', trigger: 'blur' },
            ],
          }
        }
    },
    computed: {
        ...mapGetters(['indexQuick', 'info', 'main_url']),
    },
    beforeMount() {
        this.isMobile = this.storage.mb();
    },
    mounted() {
        //this.$wow();
        this.dots = this.isMobile ? false : true;
    },
    methods: {
        cc() {
            //return ` ${this.isMobile?'ismobile':this.$store.state.size}`
        },
        wow() {
            if (process.browser) {
                // 在页面mounted生命周期里面 根据环境实例化WOW
                new WOW({
                    live: false,
                    offset: 0
                }).init();
            }
        },
        handleGetMailCode(){
            console.log(111)

            const pattern= /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            if(!this.form.email){
                this.$message.error('请输入登录邮箱');
            }else if(!pattern.test(this.form.email)){
                this.$message.error('邮箱格式有误');
            }else{
                this.getMailCode()
            }
        },

        handleSubmit(e){
            e.preventDefault();
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.handlelogin();
                }else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handlelogin(){
             this.$store.dispatch("Login",this.form).then((data) => {
                console.log(data,'datadatadata')
                this.$message.info(data.message||'登录成功!');
                this.$router.push({ path:'/handlereport' || "/" }).catch(()=>{});
            }).catch((err) => {
                console.log(err,'err')
            });
        },
        getMailCode(){
            this.verifycodeLoding=true;
            getMailCodeApi(this.form).then((data)=>{
                this.$message.info(data.message||'获取验证码成功!');
            }).catch((err)=>{
                console.log(err,'err')
                err.msg?this.$message.error(err.msg):'';
                this.verifycodeLoding=false;
            })
        }
    },
}
</script>

<style>

</style>
<style lang="less" scoped>
    .verifyButton{
        height: 38px;
        width: 100%;
        border-radius: 0;
    }
  .container{
    font-family: '微软雅黑', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    /deep/ .ant-input-group-addon{
        padding: 0;
    }
  }
  .title{
    color: #1f1f1f;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .subtitle{
    color: #8c8c8c;
    font-size: 22px;
  }
  #components-login{
      width: 100%;
      /deep/ .ant-input {
          height: 38px;line-height: 38px;font-size: 18px;
      }
      .lastitem{
        margin-bottom: 0px;
      }
      .continfo{
        margin: 10px 0px 20px 0px;
        padding-left: 10px;
        text-align: left;
        .tel{
          font-family: emoji;
          font-size: 16px;
          font-weight: 600;
          color: #1f1f1f;
          margin-bottom: 10px;
        }
      }
  }
  .formwaper{
    width: 600px;
  }
  .login-form-button{
    width: 240px;
    height: 48px;
    font-size: 22px;
  }

</style>
